<template>
	<div class="">
		<div class="crumbs">
			<el-breadcrumb separator="/">
				<el-breadcrumb-item><i class="el-icon-lx-copy"></i> 家庭管理</el-breadcrumb-item>
			</el-breadcrumb>
		</div>
		<!-- 表格 -->
		<div class="container">
			<div class="handle-box">
				<el-input v-model="query.word" placeholder="家庭名" class="handle-input mr10"></el-input>
				<el-button type="primary" icon="el-icon-search" @click="getFamilyList">搜索</el-button>
			</div>

			<el-table :data="families" class="table" height="350">
				<el-table-column label="ID" align="center">
					<template #default="scope">
						<span>{{scope.row.id}}</span>
					</template>
				</el-table-column>
				<el-table-column label="家庭名" align="center">
					<template #default="scope">
						<el-input v-model="tfamily.name" v-if="scope.row.isEdit" />
						<span v-if="!scope.row.isEdit">{{scope.row.name}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="house" label="住址" align="center"></el-table-column>
				<el-table-column prop="number" label="家庭人数" align="center">
					<template #default="scope">
						<el-input v-model="tfamily.number" v-if="scope.row.isEdit" />
						<span v-if="!scope.row.isEdit">{{scope.row.number}}</span>
					</template>
				</el-table-column>
				<el-table-column prop="phone" label="联系电话" align="center">
					<template #default="scope">
						<el-input v-model="tfamily.phone" v-if="scope.row.isEdit" />
						<span v-if="!scope.row.isEdit">{{scope.row.phone}}</span>
					</template>
				</el-table-column>
				<el-table-column label="操作" width="250" align="center">
					<template #default="scope">
						<div v-show="!scope.row.isEdit">
							<el-button size="mini" @click="handleDetail(scope.$index, scope.row)">查看成员</el-button>
							<el-button size="mini" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
              <el-button size="mini" @click="handleAccount(scope.$index, scope.row)">账户</el-button>
						</div>
						<div v-show="scope.row.isEdit">
							<el-button size="mini" @click="cancelEdit(scope.$index, scope.row)">取消</el-button>
							<el-button size="mini" @click="finishEdit(scope.$index, scope.row)">完成</el-button>
              <el-button size="mini" @click="handleAccount(scope.$index, scope.row)">账户</el-button>
						</div>
					</template>
				</el-table-column>
			</el-table>
			<div class="handle-row">
				<el-button type="primary" @click="toAddFamily()">添加家庭</el-button>
			</div>

			<!-- 页码 -->
			<div class="pagination">
				<el-pagination background layout="total, prev, pager, next" :current-page="query.page" :page-size="query.pageSize"
				 :total="query.pageTotal" @current-change="handlePageChange"></el-pagination>
			</div>
		</div>

		<!-- 添加弹出框 -->
		<el-dialog title="添加新家庭" v-model="addDialogVisible" width="50%" center>
			<div style="padding: 10px;">
			  <el-input placeholder="请输入内容" v-model="tfamily.name">
			    <template #prepend>家庭名</template>
			  </el-input>
			</div>
			<div style="padding: 10px;">
			  <el-input placeholder="请输入内容" v-model="tfamily.phone">
			    <template #prepend>联系方式</template>
			  </el-input>
			</div>
			<div style="padding: 10px;">
			  <el-input placeholder="请输入内容" v-model="tfamily.number">
			    <template #prepend>人数</template>
			  </el-input>
			</div>
			
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="addDialogVisible = false">取 消</el-button>
					<el-button type="primary" @click="addFamily()">确 定</el-button>
				</span>
			</template>
		</el-dialog>

    <!--  账号管理弹窗  -->
    <el-dialog
        title="账号管理"
        v-model="accountDialogVisible"
        width="30%">
      <el-form>
        <el-form-item label="用户名">
          <el-input v-model="account.username" :disabled="accountIsEdit"></el-input>
        </el-form-item>
        <el-form-item label="设置新密码">
          <el-input v-model="account.password"></el-input>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="accountDialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="saveAccount" v-if="accountIsEdit">保存新密码</el-button>
          <el-button type="primary" @click="addAccount" v-if="!accountIsEdit">添加账号</el-button>
        </span>
      </template>
    </el-dialog>
	</div>
</template>

<script>
	export default {
		name: 'family',
		data() {
			return {
				families: [{
					"id": 1,
					"name": "张三",
					"number": "3",
					"phone": "123456",
					"house": "一栋二单元403",
				}],
				tfamily: {},
				query: {
					word: '',
					page: 1,
					pageSize: 5,
					pageTotal: 0
				},
				addDialogVisible: false,
        account: {
          username: "",
          password: ""
        },
        accountDialogVisible: false,
        accountIsEdit: true,
        accountFamilyId: 0,
			}
		},
		methods: {
			getFamilyList() {
				this.$axios.get("/families", {
					params: this.query
				}).then(res => {
					if (res.data.code == 200) {
						this.families = res.data.obj.records;
						this.families.map(item => {
							item.house = item.area_name ? item.area_name + ' ' + item.building_name + ' ' + item.unit_name + ' ' + item.house_num : '无';
							item.idEdit = false;
						})
						this.query.pageTotal = res.data.obj.total;
					}
				})
			},
			handlePageChange(val) {
				this.query.page = val;
				this.getFamilyList();
			},
			handleEdit(idx, data) {
				this.tfamily = JSON.parse(JSON.stringify(data));
				this.families[idx].isEdit = true;
			},
			cancelEdit(idx, data) {
				this.families[idx].isEdit = false;
			},
			finishEdit(idx, data) {
				this.families[idx] = this.tfamily;
				this.$axios.put("/family", this.tfamily).then(res => {
					if (res.data.code == 200) {
						this.$message.success("修改成功");
					}
					else {
						this.$message.error("修改失败");
					}
					this.families[idx].isEdit = false;
				})
			},
			toAddFamily() {
				this.tfamily = {};
				this.addDialogVisible = true;
			},
			addFamily() {
				this.$axios.post("/family", this.tfamily).then(res => {
					if (res.data.code == 200) {
						this.$message.success("添加成功");
					}
					else {
						this.$message.error("添加失败");
					}
					this.addDialogVisible = false;
				})
			},
			handleDetail(idx, data) {
				this.$router.push('/family-member' + data.id);
			},
      /*打开账户管理*/
      handleAccount(index, row) {
        this.account = {};
        this.accountDialogVisible = true;
        console.log(row)
        this.$axios.get("/account/family/" + row.id).then(res=>{
          if (res.data.code == 200) {
            this.account.username = res.data.message;
            this.accountIsEdit = true;
          } else {
            this.accountIsEdit = false;
            this.accountFamilyId = row.id;
          }
        })
      },
      /*保存账号信息*/
      saveAccount() {
        console.log(this.account);
        if (this.account.password == undefined ||this.account.password === ""){
          this.$message.error("新密码不能为空")
          return;
        }
        this.$axios.put("/account", this.account).then(res=>{
          if(res.data.code == 200) {
            this.$message.success("新密码设置成功");
          } else{
            this.$message.error("设置失败，请稍后重试")
          }
          this.accountDialogVisible = false;
        })
      },
      /*添加账号信息*/
      addAccount(){
        console.log(this.account);
        if (this.account.username == undefined ||this.account.username === "" || this.account.password == undefined ||this.account.password === "") {
          this.$message.error("账号和密码不能为空")
          return;
        }
        this.$axios.post("account", {
          id: this.accountFamilyId,
          type: 1,
          account: this.account
        }).then(res=>{
          if (res.data.code == 200) {
            this.$message.success("账户添加成功");
          }else{
            this.$message.error("设置失败，请稍后重试")
          }
          this.accountDialogVisible = false;
        })
      }
		},
		components: {

		},
		created() {
			this.getFamilyList();
		}
	}
</script>

<style scoped>
	.handle-box {
		margin-bottom: 20px;
	}

	.handle-select {
		width: 120px;
	}

	.handle-input {
		width: 300px;
		display: inline-block;
	}

	.handle-row {
		margin-top: 20px;
	}

	.table {
		width: 100%;
		font-size: 14px;
	}

	.red {
		color: #ff0000;
	}

	.mr10 {
		margin-right: 10px;
	}

	.table-td-thumb {
		display: block;
		margin: auto;
		width: 40px;
		height: 40px;
	}

	.content-title {
		font-weight: 400;
		line-height: 50px;
		margin: 10px 0;
		font-size: 22px;
		color: #1f2f3d;
	}

	.pre-img {
		width: 100px;
		height: 100px;
		background: #f8f8f8;
		border: 1px solid #eee;
		border-radius: 5px;
	}

	.crop-demo {
		display: flex;
		align-items: flex-end;
	}

	.crop-demo-btn {
		position: relative;
		width: 100px;
		height: 40px;
		line-height: 40px;
		padding: 0 20px;
		margin-left: 30px;
		background-color: #409eff;
		color: #fff;
		font-size: 14px;
		border-radius: 4px;
		box-sizing: border-box;
	}

	.crop-input {
		position: absolute;
		width: 100px;
		height: 40px;
		left: 0;
		top: 0;
		opacity: 0;
		cursor: pointer;
	}
</style>
